<template>
  <div class="box">
    <header>
      <div class="top">
        <span class="iconfont icon-iconfontjiantouzuo" @click="back"></span>
        <span>美味不用等</span>
      </div>
      <div class="search">
        <span class="iconfont icon-sousuo"></span>
        <span>输入城市名称</span>
      </div>
      <div class="redir">
        <p>定位城市</p>
        <div>
          <span> 北京 </span>
        </div>
      </div>
      <div class="hotCity">
        <p>热门城市</p>
        <div>
          <span v-for="item in citys.hot" :key="item.id">
            {{ item.name }}
          </span>
        </div>
      </div>
      <!-- <div class="citys">
         <div v-for="(item,index) in cityTop" :key="index">
          <p>{{item}}</p>
         </div>
      </div> -->
      <van-index-bar sticky-offset-top="66" class="cityCon" :index-list="cityTop">
        
        <view  v-for="(item, index) in cityTop" :key="index">
          <van-index-anchor  :index="item" />
          <p class="p_top" :title="m" v-for="ite in cityCon[index]" :key="ite.id">
             <van-cell >
            {{ ite.name }}
          </van-cell>
          </p>
         
        </view>
      </van-index-bar>
    </header>
  </div>
</template>

<script >
import { getCits } from "../../service/location";

import "../../static/font_2197595_jc1thycheq/iconfont.css";
export default {
  data() {
    return {
     
      citys: {},
      cityTop: [],
      cityCon: [],
      m: "456456",
    };
  },
  methods: {
    back() {
      uni.navigateBack();
    },
    async getCits() {
      const result = await getCits();
      console.log(result);

      if (result.errNo === 0) {
        this.citys = result.data;
        this.cityTop = Object.keys(result.data.list);
        this.cityCon = Object.values(result.data.list);
    
      }
    },
  },
  onShow() {
    this.getCits();
  },
};
</script>

<style lang='scss' scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.box {
  width: 100%;
  height: 100%;
  .top {
    padding: 70rpx 30rpx 40rpx 30rpx;
   position:sticky;
   top:0;
   background: #fff;
   z-index: 9999999;
    span {
      margin-right: 30rpx;
    }
  }
  .search {
    width: 100%;
    border-radius: 30rpx;
    background: #e8e6e6;
    text-align: center;
    padding: 6rpx;
    margin-bottom: 16rpx;
    span {
      margin-right: 10rpx;
      color: #ada2a2;
      font-size: 34rpx;
    }
  }
  .redir {
    p {
      background: #f7f5f5;
      padding: 6rpx 20rpx;
      font-size: 34rpx;
      color: #ada2a2;
    }
    > div {
      padding: 20rpx 20rpx;
      display: flex;
      justify-content: start;
      flex-wrap: wrap;
      span {
        background: #eae9e9;
        padding: 10rpx 0;
        width: 30%;
        text-align: center;
        margin-right: 20rpx;
      }
    }
  }
  .hotCity {
    p {
      background: #f7f5f5;
      padding: 6rpx 20rpx;
      font-size: 34rpx;
      color: #ada2a2;
    }
    > div {
      padding: 20rpx 20rpx;
      display: flex;
      justify-content: start;
      flex-wrap: wrap;
      span {
        background: #eae9e9;
        padding: 10rpx 0;
        width: 30%;
        text-align: center;
        margin-right: 20rpx;
        margin-top: 20rpx;
      }
    }
  }
.cell{
  background-color: red;
}

}
// .box >>> .van-cell__value{
//   background-color: red;
// }

</style>